<template>
  <div class="qtHardware">
    <qtHeader fatherTitle='资产' fatherCreate='创建新的' ref="qtHeader" @tell='getName'></qtHeader>
    <el-row class="qtContent">
      <el-col :span="24" >
    <el-table
      height="778px"
      stripe
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      v-loading="loading"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="assetsName" label="资产类型" width="100">
        <template slot-scope="scope">{{scope.row.name}}</template>
      </el-table-column>
      <!-- <el-table-column prop="assetsPhoto" label="资产图片" width="120"></el-table-column> -->
      <el-table-column  label="资产图片" width="150" >
        <template slot-scope="scope">
          <img :src="'http://www.it.com/api'+scope.row.assetsPhoto" alt="" class="qtImg" v-if='scope.row.assetsPhoto !== null' ref="qqimg">
        </template>
      </el-table-column>
      <el-table-column prop="assetsLabel" label="资产标签" width="120"></el-table-column>
      <el-table-column prop="assetsModel" label="资产型号" width="130"></el-table-column>
      <el-table-column prop="assetsStatus" label="状态" width="130">
        <template slot-scope="scope">{{scope.row.state}}</template>
      </el-table-column>
      <el-table-column  label="使用人" width="120">
        <template slot-scope="scope">{{ scope.row.nickname }}</template>
      </el-table-column>
      <el-table-column prop="assetsDepartment" label="部门" width="120">
        <template slot-scope="scope">{{scope.row.departments}}</template>
      </el-table-column>
      <el-table-column prop="assetsDistribution" label="分配日期" width="150"></el-table-column>
      <el-table-column prop="assetsReturn" label="归还日期" width="120"></el-table-column>
      <el-table-column prop="assetsAddress" label="位置" width="100"></el-table-column>
      <!-- <el-table-column prop="assetsCost" label="购买成本" width="100"></el-table-column> -->
      <el-table-column  label="购买成本" width="100">
        <template slot-scope="scope">￥{{ scope.row.assetsCost }}</template>
      </el-table-column>
      <el-table-column prop="assetsDate" label="购买日期" width="150"></el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope" >
          <el-button size="mini" type="warning" @click="handleEdit(scope.row)">
            <i class="el-icon-edit"></i>
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
            <i class="el-icon-delete"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
    </el-col>
</el-row>
<!-- 添加弹框 -->
    <el-dialog  :visible.sync="dialogFormVisible" width="800px"  center custom-class="dialogClass" @close="cancel">
      <el-form :model="form" ref="dataform">
        <el-form-item label="公司" :label-width="formLabelWidth" prop="companyvalue">
          <el-select v-model="form.companyvalue" placeholder="请选择类型">
            <el-option  v-for="item in company" :key="item.id" :value="item.id" :label="item.companies"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资产标签" :label-width="formLabelWidth" prop="label">
          <el-input v-model="form.label" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="资产类型" :label-width="formLabelWidth" prop="categoriesvalue">
          <el-select v-model="form.categoriesvalue" placeholder="请选择类型">
            <el-option v-for="item in categories" :key="item.name" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth" prop="statevalue">
          <el-select v-model="form.statevalue" placeholder="请选择状态">
            <el-option v-for="item in state" :key="item.state" :value="item.id" :label="item.state"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="使用人" :label-width="formLabelWidth" prop="uservalue">
          <el-select v-model="form.uservalue" placeholder="请选择使用人" filterable>
            <el-option v-for="(item,index) in user" :key="index" :value="item.id" :label="item.nickname"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="资产型号" :label-width="formLabelWidth" prop="modelvalue">
          <el-select v-model="form.modelvalue" placeholder="请选择型号">
            <el-option v-for="(item,index) in model" :key="index" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="部门" :label-width="formLabelWidth" prop="departmentvalue">
          <el-select v-model="form.departmentvalue" placeholder="请选择部门">
            <el-option v-for="(item,index) in department" :key="index" :value="item.depid" :label="item.departments"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应商" :label-width="formLabelWidth" prop="suppliervalue">
          <el-select v-model="form.suppliervalue" placeholder="请选择供应商">
            <el-option v-for="(item,index) in supplier" :key="index" :value="item.id" :label="item.suppliersName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分配日期" :label-width="formLabelWidth" prop="assignDate" >
          <el-date-picker
            v-model="assignDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="归还日期" :label-width="formLabelWidth" prop="returnDate">
          <el-date-picker
            v-model="returnDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="位置" :label-width="formLabelWidth" prop="place">
          <el-input v-model="form.place" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="购买成本" :label-width="formLabelWidth" prop="price">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="购买日期" :label-width="formLabelWidth" prop="purchasingDate">
          <el-date-picker
            v-model="purchasingDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="资产图片" :label-width="formLabelWidth">
         <el-upload
          class="qtUpload"
          action="/api/assets/uploadFile.php"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="uploadFile"
          list-type="picture"
          :limit=1
          :on-success="handleSuccess"
          with-credentials
          ref="upload"
          >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getHardwareData, getCompanies, getCategoriesName, getAssetsState, getUser, getModelsName, getDepartment, getSuppliers, addAssets, delAssets, checkAssets } from '@/api/index.js'
import qtHeader from '@/components/header'
export default {
  data () {
    return {
      tableData: [],
      multipleSelection: [],
      currentPage1: 1,
      total: 10,
      page: 1,
      pageSize: 10,
      id: 1,
      dialogFormVisible: false,
      form: {
        label: '', // 标签
        place: '', // 位置
        price: '', // 购买成本
        companyvalue: '',
        statevalue: '',
        categoriesvalue: '',
        uservalue: '',
        modelvalue: '',
        departmentvalue: '',
        suppliervalue: ''
      },
      supplier: [], // 供应商
      department: [], // 部门
      model: [], // 型号
      user: [], // 用户
      state: [], // 状态
      categories: [], // 资产类型
      company: [], // 公司
      formLabelWidth: '200px',
      loading: false,
      assignDate: '', // 分配日期
      returnDate: '', // 归还日期
      purchasingDate: '', // 购买日期
      uploadFile: [], // 图片上传
      uploadSuccess: '',
      assetsId: '',
      row: '',
      test: 123
    }
  },
  components: {
    qtHeader
  },
  mounted () {
    // this.getHardwareData(this.$route.params.id)
    let idData = this.$route.params.id
    let id = idData.split(':')
    this.getHardwareData(id[1])
    this.id = id[1]
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.currentPage1 = 1
      this.getHardwareData(this.id)
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page = val
      this.getHardwareData(this.id)
    },
    getHardwareData (id) {
      this.loading = true
      getHardwareData({ page: this.page, pageSize: this.pageSize, id: id })
        .then(res => {
          if (res.data.code === 200) {
            this.loading = false
            this.tableData = res.data.data
            this.total = Number(res.data.total.total)
          }
        })
    },
    getName (name) {
      this.dialogFormVisible = true
      // this.$refs.dataform.resetFields()
      // 弹窗中的公司
      getCompanies().then(res => {
        console.log(res)
        if (res.data.code === 200) {
          this.company = res.data.data
        }
      })
      // 弹框中的资产类型
      getCategoriesName().then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          this.categories = res.data.data
        }
      })
      // 弹框的资产状态
      getAssetsState().then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          this.state = res.data.data
        }
      })
      // 弹框的用户列表
      getUser().then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          this.user = res.data.data
        }
      })
      // 弹框的资产型号
      getModelsName().then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          this.model = res.data.data
        }
      })
      // 弹框的部门
      getDepartment().then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          this.department = res.data.data
        }
      })
      // 弹窗的供应商
      getSuppliers().then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          this.supplier = res.data.data
        }
      })
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    // 图片上传成功返回
    handleSuccess (response) {
      this.uploadSuccess = response.path
      // console.log(this.uploadSuccess)
    },
    // 弹框点击提交数据
    confirm () {
      var obj = {
        // id: this.row.id,
        label: this.form.label,
        place: this.form.place,
        price: this.form.price,
        company: this.form.companyvalue,
        state: this.form.statevalue,
        categories: this.form.categoriesvalue,
        user: this.form.uservalue,
        model: this.form.modelvalue,
        department: this.form.departmentvalue,
        supplier: this.form.suppliervalue,
        assignDate: this.assignDate, // 分配日期
        returnDate: this.returnDate, // 归还日期
        purchasingDate: this.purchasingDate, // 购买日期
        uploadPath: this.uploadSuccess // 图片上传地址
      }
      if (this.assetsId) {
        obj.id = this.assetsId
        // console.log(this.form.label)
        if (this.row.assetsLabel !== this.form.label) {
          obj.label = this.form.label
        } else {
          obj.label = this.row.assetsLabel
        }
        if (this.row.assetsAddress !== this.form.place) {
          obj.place = this.form.place
        } else {
          obj.place = this.row.assetsAddress
        }
        if (this.row.assetsCost !== this.form.price) {
          obj.price = this.form.price
        } else {
          obj.price = this.row.assetsCost
        }
        if (!isNaN(this.form.companyvalue)) {
          obj.company = this.form.companyvalue
        } else {
          obj.company = this.row.companiesId
        }
        if (!isNaN(this.form.statevalue)) {
          obj.state = this.form.statevalue
        } else {
          obj.state = this.row.assetsStateId
        }
        if (!isNaN(this.form.categoriesvalue)) {
          obj.categories = this.form.categoriesvalue
        } else {
          obj.categories = this.row.categoriesId
        }
        if (!isNaN(this.form.uservalue)) {
          obj.user = this.form.uservalue
        } else {
          obj.user = this.row.userId
        }
        if (!isNaN(this.form.modelvalue)) {
          obj.model = this.form.modelvalue
        } else {
          obj.model = this.row.modelsId
        }
        if (!isNaN(this.form.departmentvalue)) {
          obj.department = this.form.departmentvalue
        } else {
          obj.department = this.row.departmentsId
        }
        if (!isNaN(this.form.suppliervalue)) {
          obj.supplier = this.form.suppliervalue
        } else {
          obj.supplier = this.row.suppliersId
        }
        if (this.row.assetsDistribution !== this.assignDate) {
          obj.assignDate = this.assignDate
        } else {
          obj.assignDate = this.row.assetsDistribution
        }
        if (this.row.assetsReturn !== this.returnDate) {
          // console.log(this.returnDate)
          obj.returnDate = this.returnDate
          // obj.returnDate = null
        } else {
          obj.returnDate = this.row.assetsReturn
        }
        if (this.row.assetsDate !== this.purchasingDate) {
          obj.purchasingDate = this.purchasingDate
        } else {
          obj.purchasingDate = this.row.assetsDate
        }
        if (this.row.assetsPhoto !== this.uploadSuccess) {
          obj.uploadPath = this.uploadSuccess
        } else {
          obj.uploadPath = this.row.assetsPhoto
        }
        console.log(obj)
        // 编辑资产
        // console.log(obj)
        checkAssets(obj).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.msg)
            this.getHardwareData(this.id)
          } else {
            this.$message.error(res.data.msg)
          }
        })
      } else {
        // 创建资产
        addAssets(obj).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.msg)
          } else {
            this.$message.error(res.data.msg)
          }
          // this.getHardwareData(this.id)
          // this.$refs.form.resetFields()
          // this.$refs.upload.clearFiles()
          // this.assignDate = ''
          // this.returnDate = ''
          // this.purchasingDate = ''
        })
      }
      this.getHardwareData(this.id)
      // this.form = {}
      this.$refs.upload.clearFiles()
      this.assignDate = ''
      this.returnDate = ''
      this.purchasingDate = ''
      this.dialogFormVisible = false
    },
    cancel () {
      this.assetsId = ''
      this.$refs.dataform.resetFields()
      for (var key in this.form) {
        this.form[key] = ''
      }
      // this.form = {}
      this.$refs.upload.clearFiles()
      this.assignDate = ''
      this.returnDate = ''
      this.purchasingDate = ''
      this.dialogFormVisible = false
    },
    // 删除
    handleDelete (row) {
      this.$confirm('是否删除资产?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delAssets(row.id).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.msg)
          } else {
            this.$message.error(res.data.msg)
          }
          // 判断当删除的数据为当前页中的最后一条数据，刷新页面的时候需要把当前页码数减1
          if (this.total / this.pageSize - parseInt(this.total / this.pageSize) <= 0.1) {
            this.page = this.page - 1
          }
          this.getHardwareData(this.id)
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 编辑
    handleEdit (row) {
      // this.$refs.dataform.resetFields()
      this.getName(name)
      this.row = row
      this.assetsId = row.id
      this.form.label = row.assetsLabel
      this.form.place = row.assetsAddress
      this.form.price = row.assetsCost
      this.form.companyvalue = row.companies
      this.form.statevalue = row.state
      this.form.categoriesvalue = row.name
      this.form.uservalue = row.nickname
      this.form.modelvalue = row.assetsModel
      this.form.departmentvalue = row.departments
      this.form.suppliervalue = row.suppliersName
      this.assignDate = row.assetsDistribution
      this.returnDate = row.assetsReturn
      this.purchasingDate = row.assetsDate
      this.uploadSuccess = row.assetsPhoto
    }
  },
  watch: {
    '$route' (to, from) {
      if (to.name === 'hardware') {
        var splitId = to.params.id.split(':')
        var id = splitId[1]
        this.id = id
        this.page = 1
        this.pageSize = 10
        this.getHardwareData(id)
        this.currentPage1 = 1
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.qtHardware {
  padding: 10px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.qtTitle {
  font-size: 25px;
  text-align: left;
  line-height: 1;
}
.qtButton {
  margin-top: 5px;
  text-align: right;
  padding-right: 20px;
  .qtCreateAsset {
    background-color: #3c8dbc;
    padding: 5px 10px;
    color: #fff;
    border-radius: 5px;
  }
}
.qtContent {
  background-color: #fff;
  // padding-top: 3px;
}

.qtImg {
  display: block;
  width: 75px;
  height: 100%;
  object-fit: cover;
}
.el-pagination {
  text-align: left;
  padding-top: 5px;
}
.qtUpload {
  margin-left: 30px;
}
</style>
